<template>
  <div :class="classes || ''" class="bg-white-6 column no-wrap shadow-1 border-8 q-pa-md">
    <div class="row items-center">
      <div class="text-subtitle1 text-bold">{{ $t('AGVCore.FailureStatistics') }}</div>
      <q-space></q-space>
      <div class="row items-center q-ml-md">
        <q-badge class="q-mr-xs q-badge-dot bg-failure-rate"></q-badge>
        <div class="text-body2">{{ labelMap.faultEffic }}</div>
      </div>
      <div class="row items-center q-ml-md">
        <q-badge class="q-mr-xs q-badge-dot bg-failure-number"></q-badge>
        <div class="text-body2">{{ labelMap.faultSize }}</div>
      </div>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <q-charts :charts="charts" :colors="colors" :columns="columns" :formatTooltip="formatTooltip" :grid="grid"
              :labelMap="labelMap" :legend="{ show: false }" :rows="rows" :ySite="ySite"
              classes="col no-padding no-shadow" format></q-charts>
  </div>
</template>

<script setup>
import { postAPI } from 'src/api'
import { adaptFontSize } from 'src/utils/utils.js'
import { ref, onMounted, computed } from 'vue'
import { i18n } from 'boot/i18n'

defineProps({ classes: String })

const rows = ref([])
const ySite = [{}, { format: '%' }]
const colors = ['#00FBFFFF', '#333FFF', '#F3F3FB']
const columns = ['faultText', 'faultEffic', 'faultSize']
const charts = [{ type: 'line', yAxisIndex: 1 }, { type: 'bar' }]
const labelMap = computed(() => {
  return {
    faultSize: `${i18n.t('AGVCore.FailureNumber')}`, faultEffic: `${i18n.t('AGVCore.FailureRate')}`
  }
})
const grid = computed(() => ({ right: adaptFontSize(40) }))
const formatTooltip = (list, field) => field === 'faultEffic' ? list[field] + '%' : list[field]
const initData = () => {
  postAPI('/yfagv/api/agvAllStatus/agvErrReasonAll', { nonLoadingBar: true }, data => {
    rows.value = data || []
  }, () => rows.value = [])
}

onMounted(initData)
</script>
<style lang="scss" scoped>
.bg-failure-rate {
  background-color: #00FBFFFF;
}

.bg-failure-number {
  background-color: #333FFF;
}
</style>